<template>
  <div class="productDetail" :style="availHeight">
    <nav-bar :title="department.name" :goback="true"></nav-bar>

    <div class="gap">
      <van-swipe class="img" v-if="showImg" :autoplay="3000" indicator-color="#06A44F">
        <van-swipe-item v-for="(val,key) in imgList" :key="key">
          <img :src="val" />
        </van-swipe-item>
      </van-swipe>
      <section class="department">
        <p class="product-price" v-html="'￥'+price" />
        <p class="vip-price" v-html="'会员最低价￥'+vipPrice" />
        <p class="department-name">{{department.name}}</p>
        <p class="department-detail">{{department.detail}}</p>
      </section>
      <section class>
        <van-tabs class="tabs" type="card" background="#F5F5F7" title-active-color="#06A44F">
          <van-tab class="tab" title="专科简介">
            <div v-html="htmlContent" class="html-content"></div>
          </van-tab>
          <van-tab class="tab msg" title="联络资料">
            <div class="one">
              <p class="title">联系资料</p>
              <p class="name">{{hospital.name}}</p>
              <span>地址：&nbsp;&nbsp;{{hospital.address}}</span>
              <span>电话：&nbsp;&nbsp;{{hospital.phone}}</span>
              <span>传真：&nbsp;&nbsp;{{hospital.fax}}</span>
              <span>邮箱：&nbsp;&nbsp;{{hospital.email}}</span>
            </div>
            <div class="two">
              <p>就诊时间</p>
              <p>{{hospital.time}}</p>
              <p>公眾假期：{{hospital.holiday}}</p>
            </div>
          </van-tab>
          <van-tab class="tab" title="评价">
            <div class="comment" v-for="(item, key) in commentList" :key="key">
              <img :src="item.userImageUrl" />
              <p class="comment-username" v-html="item.nickName" />
              <p class="comment-text" v-html="item.comment" />
              <p class="comment-date" v-html="item.createTime" />
            </div>
          </van-tab>
        </van-tabs>
      </section>
    </div>
    <div class="footer">
      <div class="server">
        <img src="/static/img/server.png" alt />
      </div>
      <button @click="appointment" class="btn">预约</button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/nav/navBar";
export default {
  components: {
    NavBar
  },
  data() {
    return {
      commentList: [
        {
          userImageUrl: "/static/img/product-img.png",
          nickName: "test",
          createTime: "2019-09-23",
          comment:
            "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试"
        },
        {
          userImageUrl: "/static/img/product-img.png",
          nickName: "test",
          createTime: "2019-09-23",
          comment: "测试"
        }
      ],
      hospital: {
        name: "养和医院",
        address: "港岛跑马地山村道2－4号港岛跑马地山村道2－4号",
        phone: "2892 7589",
        fax: "2892 7589",
        email: "dental@hksh-healthcare.com",
        time:
          "星期一至星期六: 上午九時至下午六時 \n星期三: 上午九時至下午一時 \n星期日休息",
        holiday: "敬請預約"
      },
      showImg: false,
      imgList: ["/static/img/product-img.png", "/static/img/product-img.png"],
      price: 7800,
      vipPrice: 6480,
      department: {
        name: "牙科部",
        detail:
          "本院的牙科部於1981年成立，為門診及住院病者提供全面的牙科服務。我們的專業團隊包括13位專科資深名譽顧問醫生當中2位為駐院牙科醫生。 本部門的牙科醫生經驗豐富，他們與內外科醫生及其他專業醫護人員合作，為有特別需要的求診人士（例如患有其他疾病，或頭部、面部或頸部曾經受傷者）設計優質、安全及全面的治療方案。 本部門亦另設緊急牙科治療服務，在非辦公時間內為需要即時治療牙齒問題及口腔急症的人士提供服務。緊急服務時間為下午六時至晚上十一時。由於本部牙科醫生並非長時間於本院當值，如閣下於緊急服務時間求診，，惟候診時間及有關安排需視乎實際情況而定。"
      },
      htmlContent: `<!DOCTYPE html>
<style>
html{
}
</style>
<body>
  <div>
      <section style="box-sizing: border-box; text-align: justify;">
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/19cb78cb456345e2d0a9aa159af04423-sz_102613.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/f96b8d419cf5f1878f40175ed166dc91-sz_72224.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="color: rgb(9, 162, 80); box-sizing: border-box;">
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <strong style="box-sizing: border-box;">13价肺炎链球菌疫苗（儿童）</strong>
              </p>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">疫苗供应商</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: left; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">辉瑞香港</strong>
                      </p>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          美国辉瑞药厂是世界一流的生物科研製药公司，在1849年于美国纽约成立，一直运用崭新科技改善健康。辉瑞于1956年在香港成立分公司，专责处理香港及澳门的相关业务
                      </p>
                  </section>
                  <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
                      <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                          <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                              <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                                  <strong style="box-sizing: border-box;">13价肺炎链球菌疫苗</strong>
                              </p>
                          </section>
                          <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                          </section>
                      </section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          13价肺炎链球菌疫苗是目前保护率最高的婴幼儿肺炎球菌疫苗，13价疫苗额外加入3种血清型肺炎球菌导致的入侵性疾病抗体。若在2至5岁未曾注射肺炎链球菌疫苗，亦可补打一针，覆盖率高达90%。肺炎球菌可经由飞沬或呼吸道分泌物传染，是由肺炎链球菌引致的疾病，该细菌共有逾九十种血清类型，此细菌可引致严重疾病包括肺炎、脑膜炎及中耳炎等
                      </p>
                  </section>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/13ed62082117ca34b2db7141920d71d1-sz_42437.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">13价肺炎链球菌疫苗与10价及7价</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          根据卫生防护中心2015年数据显示，旧一代的肺炎球菌疫苗的覆盖率已经下降至不足一成。由此可见旧一代疫苗覆盖的肺炎球菌血清型已经不足以应付现时流行的血清型。
                      </p>
                  </section>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/ee9c1026ac80623d04b74d7513430d98-sz_11423.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">合适接种肺炎球菌疫苗的人仕</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          疫苗可预防疾病科学委员会（科学委员会）建议未满兩岁之儿童按「香港儿童免疫接种计划」接种肺炎球菌结合疫苗。包括在 2， 4 和 6 个月分别接种3剂基础接种及在12－15个月时接种一剂加强剂。
                      </p>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          科学委员会建议两岁或以上有高风险情况人士应接种一剂十三价肺炎球菌结合疫苗 （十三价疫苗），一年后再接种一剂二十三价肺炎球菌多醣疫苗（二十三价疫苗）。已经接种二十三价疫苗的人士则应在上一次二十三价疫苗接种一年后才接种十三价疫苗。而已经接种十三价疫苗的人士则应在上一次十三价疫苗接种一年后才接种二十三价疫苗。
                      </p>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          65 岁及以上而没有高风险的情况*的人士，科学委员会建议接种一剂十三价疫苗或一剂二十三价疫苗
                      </p>
                  </section>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/d8e50c4d54b12db87340ac9239057ed1-sz_27531.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/eed9d6cb5f6461387d4a71632ed9ced7-sz_58202.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">注射安排</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="/ueditor/php/upload/image/20190905/1567652130638222.gif"/>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">接种肺炎球菌结合疫苗可能会出现的不良反应</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          肺炎球菌疫苗已获证实安全。常见不良反应包括接种疫苗部位可能在接种后短时间内出现轻微肿胀及疼痛，但大部分反应在两天内会自然消退。一些可能会出现轻微发热、疲劳、头痛、发冷或肌肉疼痛。在针口位置出现严重的疼痛或移动手臂困难是非常罕见的.
                      </p>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">不适合接种肺炎球菌疫苗人仕</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          如曾在接种肺炎球菌疫苗后或对该疫苗的成分或含有白喉类毒素的疫苗出现严重过敏反应，则不应继续接种
                      </p>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">甚麽是肺炎球菌感染？</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          肺炎球菌感染泛指由肺炎链球菌（或肺炎球菌）引致的疾病。虽然肺炎球菌一般只会引起较轻微的病症如窦炎和中耳炎，但它亦可引致严重甚至致命的侵入性肺炎球菌疾病如入血性肺炎、败血病和脑膜炎。幼儿及长者患上侵入性肺炎球菌疾病后病情通常较为严重.
                      </p>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">甚麽是肺炎链球菌 / 肺炎球菌？</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="text-align: justify; font-size: 15px; box-sizing: border-box;">
                      <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          肺炎链球菌（肺炎球菌）是肺炎球菌感染的致病原。它是一种格蘭氏阳性细菌，并有由多醣组成的荚膜。荚膜不同的多醣组合可构成不同血清型的肺炎球菌，至今发现 90 多种血清型的肺炎球菌。
                      </p>
                  </section>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="/ueditor/php/upload/image/20190905/1567652130393720.png"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/831f2d6f8510aa3b9610fd2d6917dea2-sz_72084.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="/ueditor/php/upload/image/20190905/1567652130481461.png"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/79c8e46e378b9a85fb9cdcf741b9d695-sz_99793.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="margin: 15px 0%; text-align: center; position: static; box-sizing: border-box;">
              <section style="display: inline-block; width: 96%; vertical-align: top; box-sizing: border-box;">
                  <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
                      <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                          <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                              <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                                  <strong style="box-sizing: border-box;">预约须知</strong>
                              </p>
                          </section>
                          <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                              <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                          </section>
                      </section>
                  </section>
              </section>
          </section>
          <section style="box-sizing: border-box;">
              <p style="text-align: left; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <strong style="font-size: 15px; letter-spacing: 0px; text-align: justify; box-sizing: border-box;"><span style="color: rgb(9, 162, 80); box-sizing: border-box;">如何预约</span></strong>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;"><br/></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;">付款后2个工作日内将会收到利佳健康发出的短</span><span style="font-size: 15px; letter-spacing: 0px; box-sizing: border-box;">信，短信上会附有预约链接，点击预约链接选择预约的时</span><span style="font-size: 15px; letter-spacing: 0px; box-sizing: border-box;">间和提交个人信息，如超时未收到短信，可联系客服索取。工作时间:9:00-18:30</span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="color: rgb(9, 162, 80); font-size: 15px; box-sizing: border-box;"><strong style="box-sizing: border-box;"><br/></strong></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="color: rgb(9, 162, 80); font-size: 15px; box-sizing: border-box;"><strong style="box-sizing: border-box;">预约规则</strong></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;"><br/></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;">请至少提前一周预约，每天接种名额有限，约满则止，故<span style="letter-spacing: 0px; box-sizing: border-box;">拍下不代表预约成功，请务必收到预约确认结果后再购买机票酒店，以免造成损失。</span></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;"><strong style="box-sizing: border-box;"><span style="color: rgb(9, 162, 80); box-sizing: border-box;"><br/></span></strong></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;"><strong style="box-sizing: border-box;"><span style="color: rgb(9, 162, 80); box-sizing: border-box;">预约结果确认</span></strong></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;"><br/></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;">预约结果将在提交预约信息后2个工作日内通过短信通<span style="letter-spacing: 0px; box-sizing: border-box;">知，预约结果以短信内容为准，如超出2个工作日未收到确认短信，请联系在线客服或致电查询；</span></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="color: rgb(9, 162, 80); font-size: 15px; box-sizing: border-box;"><strong style="box-sizing: border-box;"><br/></strong></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="color: rgb(9, 162, 80); font-size: 15px; box-sizing: border-box;"><strong style="box-sizing: border-box;">关于取消、改签及退款</strong></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;"><br/></span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <span style="font-size: 15px; box-sizing: border-box;">提交预约信息后仅支持改签一次，改签需在接种日期5个<span style="letter-spacing: 0px; box-sizing: border-box;">工作日前提出，改签时间仅支持往后改不支持往前改签，逾期不接受改期，逾期未前往接种者视为自动放弃名额；已收到预约成功短信的客户请勿随意取消，爽约后机构可能无法再次接受预约信息，完成电子凭证码核销后，不支持退款;</span></span>
              </p>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">退改规则</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="font-size: 15px; box-sizing: border-box;">
              <p style="text-align: left; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <strong style="letter-spacing: 0px; text-align: justify; box-sizing: border-box;"><span style="color: rgb(9, 162, 80); box-sizing: border-box;">退款规定</span></strong><br/>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <br/>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  用户未接种疫苗前可随时申请退款，接种第一剂后不支<span style="letter-spacing: 0px; box-sizing: border-box;">持退款，如接种第一剂后因身体原因不适宜接种后续疫</span><span style="letter-spacing: 0px; box-sizing: border-box;">苗，可申请退剩余疫苗费用<span style="letter-spacing: 0px; color: rgb(253, 28, 70); box-sizing: border-box;">(需出示医学证明)，</span>每支</span><span style="letter-spacing: 0px; box-sizing: border-box;">疫苗费用按原总费用的1/3计算;</span>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <strong style="box-sizing: border-box;"><span style="color: rgb(9, 162, 80); box-sizing: border-box;"><br/></span></strong>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <strong style="box-sizing: border-box;"><span style="color: rgb(9, 162, 80); box-sizing: border-box;">改签要求</span></strong>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <br/>
              </p>
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  提交预约信息后仅支持免费改签一次，改签需要提前5个<span style="letter-spacing: 0px; box-sizing: border-box;">工作日提出，逾期不接受改期，<span style="letter-spacing: 0px; color: rgb(253, 28, 70); box-sizing: border-box;">逾期未前往接种者视为<span style="letter-spacing: 0px; box-sizing: border-box;">自动取消，</span></span>改签第二次起需收取300元手续费/次；</span>
              </p>
          </section>
          <section style="color: rgb(9, 162, 80); box-sizing: border-box;">
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  <strong style="box-sizing: border-box;">疫苗服务由康健医疗中心提供，专业医生全程参与。</strong>
              </p>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">有关康健医疗</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="font-size: 15px; box-sizing: border-box;">
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  康健国际医疗集团有限公司（2008年於香港联合交易主板上市，股票编号：3886.HK）提供一站式医疗服务，於1997年成立全港首间提供多元化医护服务的综合医务中心，现於全港各区设有超过100间医务中心，核心业务為健康产业投资，以及提供和管理医疗及相关服务。
              </p>
          </section>
          <section style="margin: 15px 0%; text-align: left; transform: translate3d(9px, 0px, 0px); -webkit-transform: translate3d(9px, 0px, 0px); -moz-transform: translate3d(9px, 0px, 0px); -o-transform: translate3d(9px, 0px, 0px); position: static; box-sizing: border-box;">
              <section style="display: inline-block; vertical-align: top; box-sizing: border-box;">
                  <section style="display: inline-block; vertical-align: bottom; margin-left: 2px; font-size: 18px; color: rgb(9, 162, 80); box-sizing: border-box;">
                      <p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                          <strong style="box-sizing: border-box;">注射地址（请受注射者预约时备注选择）</strong>
                      </p>
                  </section>
                  <section style="display: inline-block; vertical-align: bottom; margin-bottom: 2px; box-sizing: border-box;">
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.8; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.6; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                      <section style="width: 0.6em; height: 0.6em; display: inline-block; vertical-align: middle; margin-left: 6px; opacity: 0.4; background-color: rgb(9, 162, 80); box-sizing: border-box;"></section>
                  </section>
              </section>
          </section>
          <section style="font-size: 15px; box-sizing: border-box;">
              <p style="white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; box-sizing: border-box;">
                  香港湾仔轩尼诗道313号中国人寿大厦1楼（所有人士）<br/>香港尖沙咀弥敦道132号美丽华广场a座810至812室（10岁以上人士）
              </p>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/0f329ed480787de4de1d8ee11ea4e47a-sz_573327.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/f0d2cb76f458587a86c25600cdad07eb-sz_517665.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="text-align: center; margin-top: 10px; margin-bottom: 10px; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/2731514f8de1ffbf6f942dcbc3f9a454-sz_762840.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="/ueditor/php/upload/image/20190905/1567652131343669.png"/>
              </section>
          </section>
          <section style="text-align: center; margin: 15px 0%; position: static; box-sizing: border-box;">
              <section style="max-width: 100%; vertical-align: middle; display: inline-block; line-height: 0; width: 96%; box-sizing: border-box;">
                  <img class="raw-image" style="vertical-align: middle; max-width: 100%; width: 100%; box-sizing: border-box;" src="http://img.xiumi.us/xmi/ua/21ZWB/i/a7eae269839c3db6765d857d33401773-sz_353956.jpg?x-oss-process=style/xmorient"/>
              </section>
          </section>
      </section>
  </div>

</body>
</html>`,
      availHeight: { height: "0" }
    };
  },
  mounted() {
    this.availHeight = { height: `${window.screen.availHeight}px` };
    this.showImg = this.imgList.length > 0;
  },
  methods: {
    appointment() {
      this.$router.push("/appointmentAdd");
    }
  }
};
</script>

<style lang='scss' scoped>
.productDetail {
  overflow: hidden;
  overflow-y: auto;
  height: 100%;
  padding-bottom: 50px;
  .gap {
    margin-top: 46px;
    padding-bottom: 50px;
    .img {
      width: 320px;
      height: 172px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .department {
      width: 300px;
      margin: 9px 11px 9px 8px;
      .product-price {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 80, 0, 1);
        line-height: 1em;
        margin: 0;
      }
      .vip-price {
        font-size: 10px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 1em;
        margin: 0;
        margin-top: 9px;
      }
      .department-name {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        margin: 0;
        line-height: 1em;
        margin-top: 11px;
      }
      .department-detail {
        margin-top: 6px;
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 1.3em;
      }
    }
    .tabs {
      overflow: auto;
      // padding: 0;
      .html-content {
        overflow: hidden;
        overflow-y: auto;
        width: 100%;
      }
      .msg {
        .one,
        .two {
          margin-left: 9px;
          margin-right: 9px;
        }
        .two {
          font-size: 13px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          line-height: 26px;
          p {
            white-space: pre-wrap;
            margin: 0;
          }
        }
        .one {
          margin-top: 14px;
          padding-bottom: 8px;
          border-bottom: 1px solid #f5f5f7;
          margin-bottom: 6px;
          p {
            margin: 0;
            font-size: 13px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
          .name {
            font-size: 13px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(12, 83, 139, 1);
            margin: 6px 0 8px 0;
          }
          span {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            display: block;
            line-height: 18px;
          }
        }
      }
      .comment {
        margin: 4px 11px 5px 9px;
        padding-bottom: 5px;
        min-height: 44px;
        position: relative;
        width: 300px;
        border-bottom: 1px solid #f5f5f7;
        &:last-child {
          margin-bottom: 55px;
          border-bottom: none;
        }
        img {
          position: absolute;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          top: 0px;
          left: 0px;
        }
        .comment-username {
          margin: 10px 0 0 40px;
          width: 250px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(59, 59, 59, 1);
          line-height: 1em;
        }
        .comment-text {
          margin: 5px 0 0 40px;
          width: 250px;
          font-size: 11px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(59, 59, 59, 1);
          line-height: 18px;
        }
        .comment-date {
          margin: 0;
          position: absolute;
          top: 0;
          right: 0px;
          font-size: 9px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 1em;
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 320px;
    height: 40px;
    display: flex;
    z-index: 101;
    .server {
      width: 52px;
      height: 100%;
      background: #e6e6e6;
      text-align: center;
      hr {
        margin: 0;
      }
      img {
        width: 17px;
        height: 17px;
        margin-top: 11.5px;
      }
    }
    .btn {
      border: none;
      width: 268px;
      height: 40px;
      background: #259b23;
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
<style>
.productDetail .tabs .van-tabs__nav {
  border: 1px solid #f5f5f7;
  margin: 0;
}
.productDetail .tabs .van-tab {
  color: #000;
  border: none;
}
.productDetail .tabs .van-tab.van-tab--active {
  background: #fff;
}
</style>